<template>
  <div
    class="popupContainer"
    v-if="show"
    id="popupContainer"
    @click="hide($event)"
    :style="popupStyle"
  >
    <div class="popupContent" id="popupContent">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    popupStyle: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    isChildOf(child, parent) {
      var parentNode;
      if (child && parent) {
        parentNode = child.parentNode;
        while (parentNode) {
          if (parent === parentNode) {
            return true;
          }
          parentNode = parentNode.parentNode;
        }
      }
      return false;
    },
    hide(e) {
      if (this.isChildOf(e.target, document.getElementById("popupContent"))) {
        return;
      } else {
        this.$emit("hidePopup");
      }
    }
  }
};
</script>

<style scoped lang="less">
.popupContainer {
  position: fixed;
  top: 0;
  width: 100%;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
}

.popupContent {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  max-height: 90vh;
}
</style>
